<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本装饰属性(text decoration attribute)</title>
  <!-- 
  text-decoration 是CSS属性，用于控制文本的装饰效果，如下划线、删除线等。 text-decoration 属性的总结： 
 
    1.  text-decoration: none; ：默认值，表示没有任何文本装饰效果。 
    2.  text-decoration: underline; ：给文本添加下划线。 
    3.  text-decoration: overline; ：给文本添加上划线。 
    4.  text-decoration: line-through; ：给文本添加删除线（穿过文本的横线）。 
    5.  text-decoration: underline overline; ：同时添加上划线和下划线。 
    6.  text-decoration: underline line-through; ：同时添加下划线和删除线。 
    7.  text-decoration: inherit; ：继承父元素的文本装饰效果。 
  -->
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .baidu {
      text-decoration: underline;
      /* 鼠标样式 */
      cursor: pointer;
    }
    .goole {
      text-decoration: line-through;
      color: red;
    }

    .bing {
      text-decoration: overline;
    }

    a {
      text-decoration: none;
    }
  </style>
</head>
<body>
  
  <!-- a元素默认有 text-decoration -->
  <a href="http://www.baidu.com" target="_blank">百度一下</a>

  <!-- span元素加装饰线 -->
  <span class="baidu">百度一下</span>

  <span class="google">google</span>
  <span class="bing">bing</span>
  <a href="http://www.taobao.com">淘宝一下</a>
</body>
</html>